<template>
  <div style="font-family: 'Roboto Slab', serif;">

      <section style="padding: 10px 0 20px 0">
        <div>
          <label for="groupName">
            <div class="InputLabel">小组名称 Group Name</div>
            <input
              type="text"
              class="MyInput"
              style="
                margin: 10px;
                width: 50% !important;
                border-radius: 0.5em !important;
              "
              name="groupName"
              v-model="form.groupName"
              placeholder="随便填一个就行"
            />
          </label>
        </div>

        <div>
          <label for="joinPassword">
            <div class="InputLabel">加入密码 Join Password</div>
            <input
              type="text"
              class="MyInput"
              style="
                margin: 10px;
                width: 50% !important;
                border-radius: 0.5em !important;
              "
              name="joinPassword"
              v-model="form.joinPassword"
              placeholder="长度应该限制在8-20之间，只包含数字，小写英文和大写英文"
            />
          </label>
        </div>

        <br />

        <div>
          <label for="joinPassword">
            <div class="InputLabel">备注 DESC (选填)</div>
            <textarea
              name=""
              id=""
              cols="30"
              rows="3"
              v-model="form.desc"
              :style="`resize:${config.textAreaMove ? 'both' : 'none'}`"
            ></textarea>
          </label>
        </div>

        <br />

        <div style="display: flex">
          <label
            class="InputLabel"
            :style="`font-size: 18px;margin:0 10px 0 0;color:${
              form.allowCreate ? 'var(--mainColor)' : 'black'
            }`"
          >
            允许组员创建作业 Allow
          </label>
          <el-tooltip
            content="勾选此项, 那么你的组员将被允许进行任务创建"
            placement="top"
            effect="dark"
          >
            <el-switch v-model="form.allowCreate" />
          </el-tooltip>
        </div>
      </section>


    <KBlock lines="2"></KBlock>

    <div class="InputLabel" align="center">
      <button class="button primary" style="font-size : 15px;" @click="form.handleSubmit">提交修改</button>
    </div>

    <KBlock lines="3"></KBlock>
  </div>
</template>

<script>
import { reactive, onMounted } from "vue";
import { ElNotification, ElLoading } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router"

export default {
  name: "adjust",
  props : ["groupID"],
  emits : ["update"],
  setup(props, ctx) {
    let store = useStore();
    let groupID = props.groupID
    let router = useRouter()
    
    onMounted(() => {
        const loading = ElLoading.service({
            lock: true,
            text: "正在恢复填写数据中...",
            background: "rgba(0, 0, 0, 0.8)",
            customClass: "MyLoading",
        });
        store.dispatch("queryGroup", {groupID : groupID}).then(function() {
          if (store.state.opSuccess) {
            loading.close()
            store.state.opSuccess = undefined
            form.groupName    = store.state.group.groupQuery.name
            form.joinPassword = store.state.group.groupQuery.password
            form.desc         = store.state.group.groupQuery.desc
            form.allowCreate  = store.state.group.groupQuery.allowCreate
            ElNotification({title: "模板恢复成功！", message: "这下你可以从提交前的状态开始修改了"})
        }
        else {
            loading.close()
            ElNotification({title: "Oops", message: "模板恢复失败, 错误原因: " + store.state.error})
        }
      })
    })
    let config = reactive({
      textAreaMove : store.state.textAreaMove,
    })

    let form = reactive({
      groupName: "",
      joinPassword: "",
      desc: "",
      allowCreate: false,
      handleSubmit() {
        let name = form.groupName.trim();
        let password = form.joinPassword.trim();
        let desc = form.desc.trim();
        let allowCreate = form.allowCreate;
        if (name.length == 0 || password.length == 0) {
          ElNotification({ title: "Wrong!", message: "您还有必填选项没填" });
          return;
        }
        if (name.includes(" ") || password.includes(" ")) {
          ElNotification({ title: "Wrong!", message: "所填字段不能含有空格！" });
          return
        }
        if (password.length < 8 || password.length > 20) {
          ElNotification({title : "Wrong!", message: "密码长度必须在8-20之间！"})
          return
        }
        if (!/^[0-9a-zA-Z]*?$/g.test(password)) {
          ElNotification({title : "Wrong!", message: "密码只能包含数字、小写英文和大写英文！"})
          return
        }

        store.dispatch("adjustGroup", { groupID, name, password, desc, allowCreate }).then(function() {
          if (store.state.opSuccess) {
            ElNotification({
              title: "修改成功！",
              message: "我会重新刷新页面以获取最新的效果",
            });
            store.state.opSuccess = undefined
            ctx.emit("update")
          }
          else {
            ElNotification({title : "Oops", message: "出错啦！错误原因: " + store.state.error})
          }
        })

      },
    });
    
    return {
      form,
      config
    };
  },
};
</script>

<style scoped>
.InputLabel {
  font-size: 18px;
}
</style>